import { Input, Space, Tabs, Button, message } from 'antd';
import styles from './index.less';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { useState } from 'react';
import {codeHelperPojo2Json} from '@/services/common'
const { TabPane } = Tabs;
const { TextArea } = Input;



export default () => {

    const [pojoContent, setPojoContent] = useState()
    const [jsonContent, setJsonContent] = useState()

    const onClickFormat = () => {
        try {

            let jsonStr = JSON.stringify(JSON.parse(jsonContent), null, "\t");
            setJsonContent(jsonStr);
        } catch (e) {
            message.error(e+"")
        }
    }

    const pojo2Json = (pojoContent)  => {
        codeHelperPojo2Json(0,{
            content:pojoContent
        }).then(result => {
            console.log(result)
            setJsonContent(JSON.stringify(result.data,null, "\t"))
        })
    }

    const pojo2JsonPlaceholder = "请输入java Pojo 代码 例如:\n @Data\n" +
    "@ToString\n" +
    "public class User implements Serializable {\n" +
    "\n" +
    "    private static final long serialVersionUID = 6029860722762556820L;\n" +
    "\n" +
    "    private Long id;\n" +
    "\n" +
    "    private String username;\n" +
    "\n" +
    "}\n";


    return (
        <div className={styles.container}>
            <Tabs>
                <TabPane key="Base64" tab="Pojo2Json">
                    <div className={styles.tabPane}>
                        <TextArea className={styles.textarea}
                            autoSize={{ minRows: 20, maxRows: 50 }}
                            value={pojoContent}
                            placeholder={pojo2JsonPlaceholder}
                            onChange={(e => setPojoContent(e.target.value))}></TextArea>
                        <Space direction="vertical" style={{
                            marginTop: 40
                        }}>
                            <Button type="primary" icon={<DoubleRightOutlined />} onClick={(e) => {
                                if (!pojoContent) {
                                    message.error("原始数据为空")
                                    return
                                }
                                pojo2Json(pojoContent)
                            }}>Pojo2Json</Button>
                            <Button type="primary" icon={<DoubleLeftOutlined />} onClick={(e) => {
                                if (!jsonContent) {
                                    message.error("json 数据为空数据为空")
                                    return
                                }
                                try {
                                    setPojoContent(Base64.parse(base64Text).toString(Utf8))
                                } catch(e) {
                                    console.log(e.toString())
                                    message.error(e.toString())
                                }
                            }}>Json2Pojo</Button>
                        </Space>
                        <TextArea className={styles.textarea} autoSize={{ minRows: 20, maxRows: 50 }} 
                            value={jsonContent}
                            placeholder="json 字符串，双击格式化"
                            onDoubleClick={onClickFormat}
                            onChange={(e) => setJsonContent(e.target.value)}></TextArea>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    )
}